<div id="city-force" style=" height: 100%"></div>

<script type="text/javascript">
    $(function () {
        loadforce();
    });
    function loadforce(){
        var param = Form.getParams($("#form"));
            $.ajax({
                url: "#springUrl('/network/city/force')",
                data: param,
                type: "POST",
                success: function (text) {
                    var d = JSON.parse(text);
                    if (d.success && d.data) {
                        var myChart = echarts.init(document.getElementById('city-force'), 'macarons');
                        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                            myChart.resize();
                        });
                        if (d.success && d.data) {
                            var categories = [];
                            categories[0] = '';
                            categories[1] = '出发点';
                            categories[2] = '目的地';
                            d.data.nodes.forEach(function (node) {
                                node.itemStyle = null;
                                node.x = node.y = null;
                                node.draggable = true;
                            });

                            var option = {
                                title: {
                                    text: '',
                                    subtext: '',
                                    top: 'bottom',
                                    left: 'right'
                                },
                                tooltip: {},
                                legend: [{}],
                                animation: false,
                                series: [
                                    {
                                        name: '',
                                        type: 'graph',
                                        layout: 'force',
                                        data: d.data.nodes,
                                        links: d.data.links,
                                        categories: categories,
                                        roam: true,
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'right'
                                            }
                                        },
                                        force: {
                                            repulsion: 80
                                        }
                                    }
                                ]
                            };
                            window.onresize=function () {
                                myChart.resize();
                            }
                            myChart.setOption(option);
                            myChart.hideLoading();

                        }
                    }
                },
                error:function (text) {
                    $("#city-force").empty();
                    var div1="<div type='text' style='padding-top:15%' class=' text-center  '>查询数据异常</div>"
                    $("#city-force").prepend(div1);
                }
            });
       }

</script>

